<template>
	<div>

		<smpPanel>
			<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="form">

				<el-row>
					<el-col :span="22">

						<el-col :span="6">
							<el-form-item label="交易码:">
								<el-input @keyup.enter.native="getList" v-model="query.body.transCode"
									placeholder="交易码"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="交易名称:">
								<el-input @keyup.enter.native="getList" v-model="query.body.transName"
									placeholder="交易名称"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="服务编码(P\R):">
								<el-input @keyup.enter.native="getList" v-model="query.body.busCode"
									placeholder="服务编码(P\R)"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="服务状态:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
								<el-select @change="getList" v-model="query.body.status" style="width: 100%"
									placeholder="服务状态">

									<el-option v-for="item in dict('SMP0002')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>



						<el-col :span="6">
							<!-- 	<el-form-item label="申请人:" :label-col="{ span: 6 }" :wrapper-col="{ span: 16  }">
								<el-select @change="getList" v-model="query.body.proposer" style="width: 100%"
									filterable remote reserve-keyword placeholder="申请人" :remote-method="getUsers">

									<el-option v-for="item in userList" :key="item.userName"
										:label="item.userChineseName" :value="item.userName">
										<span
											style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.department }}</span>
									</el-option>
								</el-select>
							</el-form-item> -->

							<el-form-item label="关联需求:">
								<!-- <el-input v-model="query.body.qmsNo" placeholder="需求号"></el-input> -->
								<el-select v-model="query.body.qmsNo" style="width: 100%" clearable filterable remote
									reserve-keyword placeholder="请输入需求编号或名称" :loading="qmsLoading" @change="getList"
									:remote-method="getRequirementList">
									<el-option v-for="item in requirelist" :key="item.qmsNo" :label="item.qmsNo"
										:value="item.qmsNo">
										<span style="float: left;margin-left: 3px;">{{ item.qmsNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.qmsName }}</span>
									</el-option>
								</el-select>
							</el-form-item>

						</el-col>

						<el-col :span="6">

							<el-form-item label="申请日期(开始):">

								<el-date-picker @change="getList" style="width: 100%"
									v-model="query.body.applyDateBegin" type="date" placeholder="选择日期"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>

							</el-form-item>
						</el-col>


						<el-col :span="6">
							<el-form-item label="申请日期(结束):">
								<el-date-picker @change="getList" style="width: 100%" v-model="query.body.applyDateEnd"
									type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>



						<el-col :span="6">
							<el-form-item label="服务系统:" prop="systemNo">
								<el-select v-model="query.body.systemNo" style="width: 100%" filterable remote
									reserve-keyword placeholder="请输入系统编号或名称" :remote-method="getsystems">
									<el-option v-for="item in systemList" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
										<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-col>

					</el-col>
					<el-col :span="2">
						<searchButtonGroup @search="onSubmit" @reset="reset"  />
					</el-col>
				</el-row>
			</el-form>
		</smpPanel>

		<!-- <div class="smp-result smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务列表</div>
				<div class="smp-panel_option">
					<el-button size="mini" plain type="success" @click="exportSelect"><i class="el-icon-download"></i>
						&nbsp;导&nbsp;&nbsp;&nbsp;&nbsp;出&nbsp;</el-button>
					<el-button size="mini" plain type="warning" @click="exportAll" :disabled="exportAllDisable"><i
							class="el-icon-download"></i>导出全部</el-button>
				</div> 
			</div>
			<div class="smp_panel_body"> -->
		<smpPanel title="服务列表">
			<div class="smp-panel_option">
				<el-button size="mini" plain type="primary" @click="exportSelect"><i class="el-icon-download"></i>
					导出</el-button>
				<el-button size="mini" @click="exportAll" :disabled="exportAllDisable"><i
						class="el-icon-download"></i>全部导出</el-button>

				<el-upload style="display: none;" :on-change="changeFile" :show-file-list="false" :limit="1"
					multiple="false" :auto-upload="false" :file-list="fileList" action="#">
					<el-button ref="importServerButton" type="success" size="mini">
						<i class="el-icon-upload"></i>导入
					</el-button>
				</el-upload>

				<el-button @click="importServer" size="mini" v-if="vaildPermission('SA0006')">
					<i class="el-icon-upload"></i>导入
				</el-button>

			</div>

			<el-table :data="list" size="mini" stripe style="width: 100%" @selection-change="selectionChange">
				<el-table-column type="selection" label="" align="center" />
				<el-table-column prop="transName" label="交易名称" align="center" show-overflow-tooltip />
				<el-table-column prop="transCode" label="交易码" align="center" min-width="100" />

				<el-table-column prop="busCode" label="服务编码(R值)" align="center" />

				<!-- 	<el-table-column prop="busType" label="服务类型" width="100" align="center" >
				<template slot-scope="scope">
				 	{{scope.row.busType|dictName("SMP0003")}}
				</template>
			</el-table-column> -->



				<el-table-column prop="systemNo" label="所属系统" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
					</template>
				</el-table-column>

				<el-table-column prop="proposer" label="申请人" align="center" min-width="60">
					<template slot-scope="scope">
					<userCard :user="$store.getters.getUser(scope.row.proposer)" v-if="scope.row.proposer!=null"></userCard>
					</template>
				</el-table-column>
				<el-table-column prop="pubCode" label="服务编码(P)" align="center" show-overflow-tooltip>
				</el-table-column>



				<el-table-column prop="qmsNo" label="关联需求" align="center">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="requireMentListView(scope.$index, scope.row)">{{scope.row.qmsNo}}</el-link>

					</template>
				</el-table-column>



				<el-table-column prop="applicationTime" label="申请时间" align="center" min-width="100" />

				<el-table-column prop="developer" label="开发人员" align="center" min-width="60">
					<template slot-scope="scope">
						<userCard :user="$store.getters.getUser(scope.row.developer)"></userCard>
					</template>
				</el-table-column>



				<el-table-column prop="status" label="服务状态" align="center" min-width="60">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0002")}}
					</template>
				</el-table-column>

				<el-table-column label="操作" align="center" width="100">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleEdit(scope.$index, scope.row)">详情</el-link>

						<el-divider v-if="vaildPermission('SA0006')" direction="vertical"></el-divider>
						<el-link size="mini" v-if="vaildPermission('SA0006')" type="primary" :underline="false"
							style="font-size: 12px;" @click="handleEdit1(scope.$index, scope.row)">删除</el-link>
					</template>
				</el-table-column>



			</el-table>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="mini" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,20,100,200]" :total="total"
					:current-page="query.pageNum" @current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</smpPanel>
	</div>
</template>

<script>
	"use strict";
	import {
		getServiceByPage,
		exportAllService,
		exportService,
		deteleService,
		getFileByExcel
	} from '@/api/service.js';


	import {
		getRequirementInfoList
	} from '@/api/requirementInfo.js';

	export default {
		components: {

		},
		data() {
			return {

				total: 0,
				list: [],
				fileList: [],
				selections: [],
				requirelist: [],
				qmsLoading: false,
				query: {
					body: {
						transCode: '',
						transName: '',
						developer: '',
						status: '',
						proposer: '',
						applyDateBegin: '',
						applyDateEnd: '',
						busCode: '',
						pubCode: ''
					},
					pageNum: 1,
					pageSize: 5
				},
				exportAllDisable: true

			};

		},

		created() {
			Object.assign(this.query.body, this.$route.query);
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},


		watch: {
			'query.body': {
				deep: true,
				handler(n, o) {
					this.exportAllDisable = true;
				}
			}
		},

		methods: {


			/**
			 * 获取需求列表
			 */
			getRequirementList(query) {

				if (query != '') {
					this.qmsLoading = true;
					getRequirementInfoList({
						query: query
					}).then(response => {
						this.requirelist = response.data.extend;
						this.qmsLoading = false;
					});
				}

			},

			selectionChange(val) {
				this.selections = val;
				//alert(JSON.stringify(val));
			},

			onSubmit() {
				this.getList();
			},

			handleEdit(index, row) {
				this.$router.push({
					name: 'serviceDetails',
					query: {
						"busCode": row.busCode,
						"transCode": row.transCode,
						"systemNo": row.systemNo
					}
				})
			},


			requireMentListView(index, row) {
				this.$router.push({
					name: 'requirementDetails',
					query: {
						"qmsNo": row.qmsNo,
						"batchNum": row.batchNum
					}
				})
			},


			//删除
			handleEdit1(index, row) {
				this.$confirm('确认删除此服务吗？', '提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						deteleService({
							"busCode": row.busCode,
							"transCode": row.transCode,
							"systemNo": row.systemNo
						}).then(response => {
							if (response.data.code == "0000") {
								this.$message.success(response.data.message);
							} else {
								this.$message.error(response.data.message);
							}
							this.getList();
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});
					})
					.catch(() => {
						this.$message({
							duration: 5000,
							type: 'info',
							message: '已取消删除'
						});
					});
			},

			reset() {
				this.query.body = {}
			},

			getList() {
				const loading = this.$loading({
					lock: true,
					text: '资源加载中，请稍后',
					spinner: 'el-icon-loading'
				})
				getServiceByPage(this.query).then(response => {
					loading.close();
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					this.exportAllDisable = false;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					})

				}).catch(error => {
					loading.close();
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},





			exportSelect() {

				if (this.selections.length == 0) {
					this.$message({
						duration: 5000,
						type: 'warning',
						message: "请选择要导出的服务！"
					});
					return;
				}



				exportService(this.selections).then(res => {

					let name = "接口文档.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '接口文档.xlsx', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},

			exportAll() {
				if (this.list.length == 0) {
					this.$message({
						duration: 5000,
						type: 'warning',
						message: "未查询到任何服务！"
					});
					return;
				}



				exportAllService(this.query).then(res => {

					let name = "接口文档.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '接口文档.xlsx', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},




			importServer() {
				this.$refs.importServerButton.$el.click();
			},


			//文件校验
			beforUpload(file) {
				//通过split方法和fileArr方法获取后缀名
				let fileArr = file.name.split('.');
				let suffix = fileArr[fileArr.length - 1];
				//只能导入xls和xlsx文件
				if (!/(xls|xlsx)/i.test(suffix)) {
					this.$message('文件格式不正确');
					return false;
				}

				return true;
			},

			//导入
			changeFile(file) {
				//校验是否符合导入条件
				if (this.beforUpload(file)) {
					var data = new FormData();
					data.append("file", file.raw);
					const loading = this.$loading({
						lock: true,
						text: '数据导入中，请稍后',
						spinner: 'el-icon-loading',
						// target:document.querySelector(".createApplyServer")
					})

					getFileByExcel(data).then(response => {

						if (response.data.code == '0000') {
							this.$message.success(response.data.message);
						} else {
							this.$message.error(response.data.message);
						}
						this.fileList = [];
						loading.close();
					}).catch(error => {
						this.$message.error(error.message);
						console.info("失败");
						console.info(error.message);
						this.fileList = [];
						loading.close();
					});

				}
			},

		},

	}
</script>


<style>

</style>
